<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <parent></parent>
    </div>
    <script src="../vue.js"></script>
    <script>

        // 子组件
        const child = Vue.extend({
            template:`
            <div>
                <img width="100px" src="11.jfif" alt="">
                <h2>海尔兄弟 双开门冷酷至尊土豪版</h2>
                <h1><font color="red">$999</font></h1>
             </div>
            `
        });

        //root组件
        const app = new Vue({
            el:"#app",
            data:{
            },
            components:{
                parent:{//组件里面再套组件
                    template:`
                        <div>
                            <h1>父组件的标题</h1>
                            <p>父组件的内容肯定是连接方式发了多少JFK撒赖咖啡碱爱看</p>
                            <child></child>
                        </div>
                    `,
                    components:{
                        child
                    }
                }
            }
        });

        //全局组件的简写
        // Vue.component("cpn", {
        //     template:`
        //         <h2>看了电视剧咖啡碱撒</h2>
        //     `
        // })

        
       
    </script>
</body>
</html>